<template>
	<view class="containar" :style="pianUser.status===1||pianUser.status==='1'?'pointer-events: none':''">
		<view class="top" :style="{'background-image': 'url('+settting+')' }">
			<image :src="user===''||user===null||user===underfine?avtar:user.userPic"
				style="width: 80px;height: 80px;border-radius: 50px;filter: blur(15);" @click="turn()"></image>
		</view>
		<view class="grid2">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list2" :key="listIndex"
					@click="grid(listItem.url,listIndex)">
					<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" name="static/icon_info/日记.png" :size="22"></u-icon> -->
					<image :src="listItem.name" style="width: 30px;height: 30px;"></image>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view style="margin-top: 30rpx;border-radius: 10px;" class="count">
			<u-cell-group>
				<u-cell title="负责声明" value="博主内容负责声明" isLink url="/pagesa/shengMing/shengMing">
					<u-icon color="#ff6123" slot="icon" size="32" name="coupon"></u-icon>
				</u-cell>
				<u-cell title="系统消息" value="查看系统实时消息" isLink url="/pagesa/systemNews/systemNews">
					<u-icon color="#ffffae" slot="icon" size="32" name="bell"></u-icon>
				</u-cell>
				<u-cell title="版本更新" :value="title" isLink @click="show1()">
					<u-icon color="#e9c5ff" slot="icon" size="32" name="calendar"></u-icon>
				</u-cell>
				<u-cell title="清除缓存" :value="size+'bit'" isLink @click="clear()">
					<u-icon color="#ffa05c" slot="icon" size="32" name="trash"></u-icon>
				</u-cell>
				<!-- 				<u-cell title="应用设置" value="进入系统常用设置" isLink url="/pagesa/ssetting/ssetting">
					<u-icon color="#544e47" slot="icon" size="32" name="setting">
					</u-icon>
				</u-cell> -->
			</u-cell-group>
			<view class="extra" style="display: flex;align-items: center;border-bottom: 1px solid #e6e6e6;">
				<u-icon color="#479aff" slot="icon" size="32" name="question"></u-icon>
				<button open-type="feedback" class="item icon-arrow">意见反馈</button>
			</view>
			<view class="extra" style="display: flex;align-items: center;" @click="loginOut()">
				<u-icon color="#1ea5ce" slot="icon" size="32" name="setting"></u-icon>
				<button class="item icon-arrow">退出登录</button>
			</view>
			<button open-type="contact" style="border-radius: 0;background-color: aliceblue;">
				<view style="display: flex;align-items: center;justify-content: center;">
					<u-icon color="#51382e" slot="icon" size="32" name="account"></u-icon>
					<text>客服</text>
				</view>
			</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pianUser: uni.getStorageSync("user"),
				settting: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F032d90e5-c1fe-4c53-b59c-abacd9c6535b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707722980&t=2bd12ef6c8f173fcb3cfae9faeab4d44',
				title: "当前版本v1.0.0",
				avtar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				list: [{
						name: '0',
						title: '相册'
					},
					{
						name: '0',
						title: '图片'
					},
					{
						name: '0',
						title: '动态'
					},
					{
						name: '0',
						title: '账单笔数'
					},
					{
						name: '0',
						title: '账单天数'
					},
					{
						name: '0',
						title: '客户'
					},

				],
				user: uni.getStorageSync("loginUser"),
				size: '',
				list2: [{
						name: '/static/icon_info/我的关注.png',
						title: '我的关注',
						url: '/pagesa/myGuanAndFen/myGuanAndFen'
					},
					{
						name: '/static/icon_info/我的粉丝.png',
						title: '我的粉丝',
						url: '/pagesa/myGuanAndFen/myGuanAndFen'
					},
					{
						name: '/static/icon_info/jiangpai.png',
						title: '我的喜欢',
						url: '/pagesa/myLikeOrPush/myLikeOrPush'
					},
					{
						name: '/static/icon_info/我的发布.png',
						title: '我的发布',
						url: '/pagesa/myLikeOrPush/myLikeOrPush'
					},
				],
			};
		},
		onShow() {
			this.user = uni.getStorageSync("loginUser")
		},

		onLoad(option) {
			let storageInfo = uni.getStorageInfoSync();
			this.size = storageInfo.currentSize;
			console.log(option.pic)
			this.user = uni.getStorageSync("loginUser")
		},
		methods: {
			loginOut() {
				uni.showModal({
					title: '您确认退出吗？',
					// content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync("loginUser")
							uni.showToast({
								title: "退出成功",
								icon: 'none'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			turn() {
				uni.navigateTo({
					url: '/pagesa/login/login'
				})
			},

			clear() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
					uni.clearStorageSync();
					uni.showToast({
						icon: "none",
						title: "清理成功"
					})
				}, 2000);
			},
			show1() {
				uni.showToast({
					title: this.title,
					icon: "none"
				})
			},
			grid(url, index) {
				uni.navigateTo({
					url: url + "?index=" + index
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.extra {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			margin-left: -10rpx;
			line-height: 1.5;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.icon-arrow {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}

	.containar {
		// background-color: #eeeeee;
		// cursor: pointer;		position: relative;

		.top {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 510rpx;
			background-size: cover;
			position: relative;
		}

		.top::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 510rpx;
			// background-image: url("https://www.10wallpaper.com/wallpaper/1280x800/1702/Rem_re_zero_girl-2016_Anime_HD_Wallpaper_1280x800.jpg");
			filter: blur(0.5px);
			z-index: -1;
			background-size: cover;
		}

		.grid {

			background-color: #fff;
			border-radius: 10px;
		}

		.grid2 {
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 160rpx;
			margin: 0 20rpx;
			background-color: #fff;
			position: relative;
			top: 20rpx;
		}

		.count {
			margin: 0 20rpx;
			height: 610rpx;
			border-radius: 6rpx;
			background-color: #fff;
			position: relative;
			top: 10rpx;
		}

	}
</style>